<template>
  <!-- 添加地址模块 -->
  <div class="add-address" ref="addr">
    <div class="add-container">
      <div class="title flex-space-bet">
        <h3>新增确认</h3>
        <span class="iconfont" @click="closeModel">&#xe66c;</span>
      </div>
      <div class="info-box">
        <div class="name">
          <input type="text" placeholder="姓名" v-model="list.receiverName" />
          <input
            type="tel"
            name=""
            id=""
            placeholder="手机号码"
            v-model="list.receiverMobile"
          />
        </div>
        <div class="addr">
          <select name="" id="" v-model="list.receiverProvince">
            <option value="北京">北京</option>
            <option value="北京">北京</option>
            <option value="北京">北京</option>
          </select>
          <select name="" id="" v-model="list.receiverCity">
            <option value="北京">北京</option>
            <option value="北京">北京</option>
            <option value="北京">北京</option>
          </select>
          <select name="" id="" v-model="list.receiverDistrict">
            <option value="北京">北京</option>
            <option value="北京">北京</option>
            <option value="北京">北京</option>
          </select>
        </div>
        <textarea
          name=""
          id=""
          cols="30"
          rows="2"
          v-model="list.receiverAddress"
        ></textarea>
        <p>
          <input
            type="tel"
            name=""
            id=""
            placeholder="邮编"
            v-model="list.receiverZip"
          />
        </p>
      </div>
      <div class="btn">
        <button @click="changeAddr">确定</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Address",
  props: ["type", "detail", "index"],
  data() {
    return {
      vwWidth: document.body.clientWidth,
      vwHeight: document.body.clientHeight,
      list: [],
      meth: 1, // 1; 新增 2；修改
    };
  },
  methods: {
    setWH() {
      this.vwWidth =
        document.body.clientWidth || document.documentElement.clientWidth;
      this.vwHeight =
        window.screen.availHeight ||
        document.documentElement.screen.availHeight;
      let wx = this.$refs.addr;
      wx.style.width = this.vwWidth + "px";
      wx.style.height = this.vwHeight + "px";
      // console.log(this.vwWidth, this.vwHeight);
    },
    closeModel(n) {
      this.$emit("closeModel", n);
    },
    changeAddr() {
      let {
        receiverName,
        receiverPhone,
        receiverMobile,
        receiverProvince,
        receiverCity,
        receiverDistrict,
        receiverAddress,
        receiverZip,
      } = this.list;
      let params = {
        receiverName,
        receiverPhone,
        receiverMobile,
        receiverProvince,
        receiverCity,
        receiverDistrict,
        receiverAddress,
        receiverZip,
      };
      // let method = 'post';
      // if(this.meth === 2){
      //   method = 'put'
      // }   //根据状态设置 请求方式
      if (this.meth === 1) {
        this.axios['post']("/shippings", params).then((res) => {
          if (res) {
            // alert("操作成功");
            this.$message("操作成功")
            this.closeModel("1"); //传1 重新获取地址列表数据  不穿不获取
            return;
          }
          // alert("网络出错");
          this.$message("网络出错")
        });
      }
      if (this.meth === 2) {
        this.axios['put'](`/shippings/${this.list.id}`, params).then((res) => {
          // alert("修改成功");
          this.$message("修改成功")
          this.closeModel("1");
        });
      }
    },
  },
  mounted() {
    this.setWH();
  },
  watch: {
    type() {
      if (this.type === true) {
        this.$refs.addr.style.top = 0;
      } else {
        this.$refs.addr.style.top = "-500%";
      }
    },
    index() {
      let i = this.index;
      if (this.index === -1) {
        this.list = [];
        this.meth = 1;
      } else {
        this.list = this.detail[i];
        this.meth = 2;
      }
    },
  },
};
</script>

<style lang='scss'>
.add-address {
  background: rgba(51, 51, 51, 0.418);
  position: fixed;
  top: -500%;
  left: 0;
  transition: 0.5s;
  .add-container {
    background: #fff;
    width: 700px;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    .title {
      font-size: 16px;
      line-height: 60px;
      background: #f5f5f5;
      padding: 0 25px;
    }
    .info-box {
      padding: 42px 40px 54px;
      display: flex;
      flex-direction: column;
      textarea {
        text-align: left;
        padding: 20px;
        width: 545px;
        margin-bottom: 20px;
      }
      input {
        display: inline-block;
        width: 283px;
        height: 40px;
        line-height: 40px;
        padding-left: 15px;
        margin-right: 20px;
      }
      p,
      div {
        text-align: left;
      }
      .addr {
        margin: 20px 0;
        select {
          width: 80px;
          height: 40px;
          line-height: 40px;
          margin-right: 20px;
          text-align: center;
          outline: none;
        }
      }
    }
    .btn {
      height: 100px;
      background: #eee;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      button {
        width: 110px;
        height: 30px;
      }
    }
  }
}
</style>